<template>
  <div class="detail">
    <view class="img" @click="flag = true">
      <image :src="obj.imgUrl" mode="widthFix" />
      <view class="mask">
        <view v-for="item in 4" :key="item">
          <text v-for="it in 10" :key="it">国潮旅拍Ai</text>
        </view>
      </view>
    </view>
    <view class="but" @click="getDownImg">无水印下载({{ punti }}积分)</view>
    <view class="maskbox" v-if="flag" @click="flag = false">
      <view class="bg"></view>
      <image :src="obj.imgUrl" mode="widthFix" />
      <view class="shuiyin">
        <view v-for="item in 4" :key="item">
          <text v-for="it in 10" :key="it">国潮旅拍Ai</text>
        </view>
      </view>
    </view>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import { onLoad, onShow, onReady } from "@dcloudio/uni-app"
import { DownImg, GetUserInfo, QxDownImg } from "@/api/user";
import { useUserStore } from '@/stores'
const userStore = useUserStore()
const obj = ref<any>({})
const punti = ref(0)
const flag = ref(false)
onLoad(async (options: any) => {
  punti.value = options.punti
  if (options.item) {
    obj.value = JSON.parse(options.item)
  }
})
const getDownImg = async () => {
  const res = await DownImg({ moID: obj.value.moID })
  if (res.code == 0) {
    downloadImg()
  } else if (res.code == 1) {
    uni.showToast({
      title: '下载失败',
      icon: 'none'
    })
  } else {
    uni.getSystemInfo({
      success: function (re) {
        if (re.platform === 'android') {
          uni.showModal({
            title: '提示',
            content: '积分不足，前去充值',
            cancelText: '取消',
            confirmText: '确认',
            success: async function (a) {
              if (a.confirm) {
                getnavurl('amount')
              } else if (a.cancel) {
              }
            }
          });
        } else if (re.platform === 'ios') {
          uni.showToast({
            title: '积分不足，请咨询客服获取积分',
            duration: 2000,
            icon: 'none'
          })
          return
        }
      },
      fail: function (err) {
        console.error('获取系统信息失败', err);
      }
    });

  }
}
const downloadImg = () => {
  uni.showLoading({
    title: '下载中'
  });
  uni.downloadFile({
    url: obj.value.imgUrl, //仅为示例，并非真实的资源
    success: (res) => {
      // if (res.statusCode === 200) {
      uni.hideLoading()
      uni.saveImageToPhotosAlbum({
        filePath: res.tempFilePath,
        success(data) {
          uni.showToast({
            title: '保存成功',
            icon: 'success',
            duration: 2000
          });
          getUserInfo()
        },
        async fail(err) {
          console.log('123456');
          const res: any = await QxDownImg({ moID: obj.value.moID })
          if (res.code == 0) {
            console.log('quxiaol1');
          }
          if (err.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
            uni.showToast({
              title: '请允许访问相册后重试',
              icon: 'none',
              duration: 1000
            });
            uni.showModal({
              title: '提示',
              content: '打开相册权限才可以保存哦',
              cancelText: '取消',
              confirmText: '打开权限',
              success: async function (res) {
                console.log(res);
                if (res.confirm) {
                  opensetting()
                } else if (res.cancel) {
                  // console.log('quwhhshshsh');
                }
              }
            });
          }
        },
        complete(res) {
          console.log('complete');
        }
      })
      // }
    }
  })
}

const opensetting = () => {
  uni.openSetting(
    {
      success(res) {
        console.log('设置成功', res);
        // 根据 res.authSetting 可以判断是否授权成功
        if (res.authSetting['scope.writePhotosAlbum']) {
          // console.log('用户已授权相册访问');
          // 进行相册操作
        } else {
          // console.log('用户未授权相册访问');
        }
      },
      fail(err) {
        // console.error('打开设置页面失败', err);
      }
    }
  );
}
// 获取用户信息
const getUserInfo = async () => {
  const res: any = await GetUserInfo()
  // const { result } = res.data[0]
  userStore.userInfo.punti = res.data.punti
}
const getnavurl = (type: any) => {
  uni.getSystemInfo({
    success: function (res) {
      if (res.platform === 'android') {
        uni.navigateTo({
          url: `/pages/${type}/index`
        })
      } else if (res.platform === 'ios') {
        uni.showToast({
          title: '积分不足，请咨询客服获取积分',
          duration: 2000,
          icon: 'none'
        })
        return
      } else {
        uni.navigateTo({
          url: `/pages/${type}/index`
        })
      }
    },
    fail: function (err) {
      console.error('获取系统信息失败', err);
    }
  });
}
</script>

<style lang="scss" scoped>
page {
  background: #F7F7F7;
}

.detail {
  width: 100%;
  height: 100%;

  .maskbox {
    width: 100%;
    // position: fixed;
    // top: 0;
    height: auto;
    margin-top: 200rpx;
    position: fixed;
    top: 0;
    left: 0;

    .bg {
      height: 100vh;
      width: 100vw;
      position: fixed;
      top: 0;
      background: rgb(0, 0, 0, 0.6);
      z-index: -1;
    }

    image {
      width: 100%;
      display: inline-block;
      height: auto;
      border-radius: 10rpx;
      z-index: 9;
      // position: fixed;
      // top: 50%;
      // left: 50%;
      // transform: translate(-50%, -50%);
    }

    .shuiyin {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      overflow: hidden;

      view {
        width: 38%;
        flex-shrink: 0;

        text {
          font-size: 30rpx;
          color: rgb(255, 255, 255, 0.4);
          display: inline-block;
          transform: rotate(-30deg);
          /* 使用 transform 旋转 */
          margin-bottom: 180rpx;
        }
      }
    }
  }

  .img {
    width: calc(100% - 64rpx);
    margin: 70rpx auto 0;
    display: block;
    height: auto;
    border-radius: 10rpx;
    position: relative;
    overflow: hidden;

    image {
      width: 100%;
      display: block;
      height: auto;
      border-radius: 10rpx;
    }

    .mask {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;

      view {
        width: 40%;
        flex-shrink: 0;

        text {
          font-size: 30rpx;
          color: rgb(255, 255, 255, 0.4);
          display: inline-block;
          transform: rotate(-30deg);
          /* 使用 transform 旋转 */
          margin-bottom: 180rpx;
        }
      }
    }
  }

  .but {
    position: fixed;
    bottom: 120rpx;
    left: 32rpx;
    width: calc(100% - 64rpx);
    height: 90rpx;
    text-align: center;
    font-size: 32rpx;
    font-weight: 600;
    display: flex;
    justify-content: center;
    background: linear-gradient(45deg, #fffacd, #ffdd99, #ffcce6);
    border-radius: 45rpx;
    line-height: 90rpx;
  }
}
</style>